<template>
	<view class="u-page">
		<template v-if="cartList.length == 0">
			<u--image src="/static/image/shopcart_empty.png" width="100%"></u--image>
		</template>
		<template v-else>
			<!-- 全选 清空  -->
			<view class="cart_header">
				<view>
					<!-- 全选 -->
					<u-checkbox-group><u-checkbox :checked="isCheckedAll" size="18" @change="handleSelectAll">全选</u-checkbox></u-checkbox-group>
				</view>
				<view class="button-delete-all" @click="handleDeleteAll">
					<u-icon name="trash" :size="18" />
					<span>清空</span>
				</view>
			</view>
			<!-- 商品列表区域 -->
			<view class="cart-list">
				<u-checkbox-group placement="column">
					<u-row v-for="(item, i) in cartList" :key="i" align="center">
						<u-col span="1">
							<!-- 复选框 -->
							<u-checkbox :checked="item.is_checked == 1 ? true : false" @change="handleCheckedChange(item)" />
						</u-col>

						<u-col span="3">
							<!-- 中间商品图片 -->
							<u-icon size="80" :name="$fullUrl(item.pic)"></u-icon>
						</u-col>

						<u-col span="8">
							<u-row class="u-line-2 goods-name">{{ item.name }}</u-row>
							<u-row align="center">
								<u-col span="4" class="price">¥{{ item.price }}</u-col>
								<u-col span="8" class="operation">
									<view style="display: flex;flex-direction: row;">
										<u-number-box v-model="item.count" integer :name="item.id" @change="handleCountChanged" :min="1" :max="10" buttonSize="22" />
										<u-button text="删除" size="mini" type="warning" @click="handleDeleteCartItem(item.id)" />
									</view>
								</u-col>
							</u-row>
						</u-col>
					</u-row>
				</u-checkbox-group>
			</view>

			<!-- 商品结算区域 -->
			<u-cell title="已选商品总金额">
				<view slot="value">
					<span class="red">¥{{ checkedAmount }}</span>
				</view>
			</u-cell>

			<!-- 结算按钮 -->
			<u-button type="primary" size="large" @click="handleCreateOrder">去结算</u-button>
		</template>
	</view>
</template>

<script>
//导入接口
import * as CartAPI from '@/api/cart.js';

export default {
	name: 'Cart',
	data() {
		return {
			cartList: [] //购物车列表
		};
	},

	//实例的生命周期函数，实例创建后被调用
	onLoad() {
		this.getCartList(); //初始化购物车数据
	},
	onShow() {
		this.getCartList(); //初始化购物车数据
	},

	computed: {
		isCheckedAll() {
			if (this.cartList.length === this.cartList.filter(item => item.is_checked === 1).length) {
				return true;
			}
			return false;
		},
		//统计购物车金额
		checkedAmount() {
			let amount = 0;
			this.cartList.forEach(item => {
				if (item.is_checked) amount += item.price * item.count;
			});
			return amount;
		}
	},

	methods: {
		//获取用户购物车数据
		getCartList() {
			this.cartList = []; //清空
			CartAPI.getCartList()
				.then(result => {
					console.log(result);
					this.cartList = result.data;
				})
				.catch(() => {});
		},

		//触发更改购物商品选中状态
		handleCheckedChange(item) {
			console.log(item);
			item.is_checked = item.is_checked === 1 ? 0 : 1;
			let id = item.id;
			let params = {
				id,
				is_checked: item.is_checked
			};

			CartAPI.updateCartChecked(params)
				.then(() => {
					//
				})
				.catch(() => {});
		},

		//触发更改购物商品数量,回调参数见官网文档
		handleCountChanged({ value, name }) {
			//console.log("handleCountChanged",{value,name})
			let params = {
				id: name,
				count: value
			};
			CartAPI.updateCartCount(params).then(result => {
				//console.log(result)
			});
		},

		//触发删除购物商品
		handleDeleteCartItem(id) {
			let ids = [];
			ids.push(id);
			CartAPI.deleteCartItem(ids).then(() => {
				this.getCartList(); //刷新列表数据
			});
		},

		//触发全选/全不选
		handleSelectAll() {
			// 点击触发后值取反
			let isChecked = !this.isCheckedAll;
			console.log('handleSelectAll', isChecked);
			//调用接口
			CartAPI.updateCartCheckedAll(isChecked).then(() => {
				this.getCartList(); //刷新列表数据
			});
		},

		//触发清空
		handleDeleteAll() {
			uni.showModal({
				title: '提示',
				content: '客官，您确定清空购物车吗?',
				success: result => {
					if (result.confirm) {
						CartAPI.deleteCartAll().then(() => {
							this.getCartList(); //刷新列表数据
						});
					}
				}
			});
		},

		//触发创建订单
		handleCreateOrder() {
			if (this.cartList.length === 0) {
				uni.$u.toast('您的购物车为空');
				return;
			}

			//uni.$u.toast("这个路由功能还没实现...");
			uni.navigateTo({
				url: '/pages/order/OrderCreate'
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.u-page {
	background-color: white;

	.cart_header {
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid lightgrey;
		font-size: 14px;
		line-height: 30px;
	}
}

.button-delete-all {
	display: flex;
	align-items: center;
}

.u-row {
	padding: 5px 0;
}
.u-col .u-checkbox {
	justify-content: center;
}
.goods-name {
	padding: 5px 10px;
	font-size: 12px;
}

.price {
	padding-left: 10px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: red;
	display: flex;
	align-items: center;
}
.operation {
	padding-right: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.red {
	color: red;
	font-weight: bold;
	font-size: 14px;
}
</style>
